<template>
  <div :class="sizeClass" class="rounded-full bg-primary flex items-center justify-center text-white font-semibold">
    {{ initial }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  name?: string;
  size?: 'sm' | 'md' | 'lg';
}>();

const initial = computed(() => {
  if (!props.name) return '👶';
  return props.name.charAt(0).toUpperCase();
});

const sizeClass = computed(() => {
  switch (props.size) {
    case 'sm': return 'w-8 h-8 text-sm';
    case 'lg': return 'w-20 h-20 text-2xl';
    default: return 'w-16 h-16 text-xl';
  }
});
</script>

<style scoped></style>
